import React from 'react';
import { Card, Table, Modal, message, Button} from 'antd';
import './index.less';
// import axios from './../../axios/index';
import axios from 'axios';
import Utils from './../../utils/utils';
// import './../../mock/index'
export default class BasicTable extends React.Component{
    state = {
        dataSource: [],
        dataSource2: []
       
    }
    params = {
        page: 1
    }
    componentDidMount() {
        const data = [
            {
                id:'0',
                userName:'jack',
                sex:'1',
                state:'1',
                interest:'1',
                birthday:'2000-01-01',
                address:'哈尔滨秋林',
                time:'09:00'
            },
            {
                id:'1',
                userName:'jack',
                sex:'1',
                state:'1',
                interest:'1',
                birthday:'2000-01-01',
                address:'哈尔滨秋林',
                time:'09:00'
            },
            {
                id:'2',
                userName:'jack',
                sex:'1',
                state:'1',
                interest:'1',
                birthday:'2000-01-01',
                address:'哈尔滨秋林',
                time:'09:00'
            },
            {
                id:'3',
                userName:'jack',
                sex:'1',
                state:'1',
                interest:'1',
                birthday:'2000-01-01',
                address:'哈尔滨秋林',
                time:'09:00'
            }
        ]
        data.map((value,index) => {
            value.key = index
        })
        this.setState({
            dataSource: data
        })
         this.request();
    }
    //动态获取mock数据
    request = () => {
    axios.get('https://www.studyinghome.com/mock/5e4ca5d80167590746b7615d/example/table/list').then((res) => { 
        let dataSource2 = res.data.result.list
        this.setState({
            dataSource2
        })
     })
  
    }
//     request = () => {
//         let _this = this;
//        axios.ajax({
//            url:'/table/list',
//            data:{
//                params:{
//                    page:this.params.page
//                },
//                 isShowLoading:false
//            }
//        }).then((res) => { 
//         //    console.log("1",res.result)
//            res.result.list.map((item, index) => {
//             item.key = index;
//         })
//     })
// }

    render() {
        const columns = [
            {
              title:'id',
              dataIndex:'id'  
            },
            {
                title:'用户名',
                dataIndex:'userName'  
              }
              ,
            {
                title:'性别',
                dataIndex:'sex' ,
                render(sex) {
                    return sex == 1 ? "男" : "女"
                } 
              }
              ,
            {
                title:'状态',
                dataIndex:'state',
                render(state ) {
                    let config = {
                        "1":"咸鱼一条",
                        "2":"鲤鱼打挺",
                        "3":"风花雪月",
                        "4":"雪中送炭",
                        "5":"干就完了"
                    }
                    return config[state]
                }  
              }
              ,
            {
                title:'爱好',
                dataIndex:'interest',
                render(interest ) {
                    let config = {
                        "1":"打球",
                        "2":"游泳",
                        "3":"健身",
                        "4":"路铁",
                        "5":"干"
                    }
                    return config[interest]
                }   
              }
              ,
            {
                title:'生日',
                dataIndex:'birthday'  
              }
              ,
            {
                title:'地址',
                dataIndex:'address'  
              }
              ,
            {
                title:'早起时间',
                dataIndex:'time'  
              }
        ]
        const rowSelection = {
            type:'radio',
          
        }
        return (
            <div>
                <Card title="基础表格" className="card-wrap">
                    <Table 
                    bordered
                        columns = {columns}
                        dataSource = {this.state.dataSource}
                        pagination={false}
                    />
                    
                </Card>

                <Card title="动态数据渲染表格-Mock" className='card-wrap'>
                    <Table 
                        
                        bordered
                        columns = {columns}
                        dataSource = {this.state.dataSource2}
                        pagination={false}
                    />
                    
                </Card>
                <Card title="点选按钮-Mock" className='card-wrap'>
                     <Table 
                        rowSelection={rowSelection}
                        bordered
                        columns = {columns}
                        dataSource = {this.state.dataSource2}
                        pagination={false}
                    />
                    
                </Card>
            </div>
        )
    }
}
